export function useCanvas(canvas) {
    const MIN_ZOOM = 0.1
    const MAX_ZOOM = 5

    // 保持原有的缩放功能
    const handleWheel = (opt) => {
        opt.e.preventDefault();
        const delta = opt.e.deltaY;
        let zoom = canvas.getZoom();

        zoom *= 0.999 ** delta;
        zoom = Math.min(Math.max(MIN_ZOOM, zoom), MAX_ZOOM);

        const point = new fabric.Point(opt.e.offsetX, opt.e.offsetY);
        canvas.zoomToPoint(point, zoom);

        // 在缩放后重绘 canvas
        canvas.renderAll();
    }
    let isPanning = false
    let lastPosX = 0
    let lastPosY = 0
    let isSpacePressed = false // 添加空格键状态跟踪

    // 添加空格键监听
    const handleKeyDown = (e) => {
        if (e.code === 'Space' && !isSpacePressed) {
            isSpacePressed = true
            document.body.style.cursor = 'grab'
            canvas.setCursor('grab')
        }
    }

    const handleKeyUp = (e) => {
        if (e.code === 'Space') {
            isSpacePressed = false
            document.body.style.cursor = 'default'
            canvas.setCursor('default')
        }
    }

    const handleMouseDown = (opt) => {
        // 只有在按住空格键时才启用平移
        if (isSpacePressed && opt.e.button === 0) {
            isPanning = true
            canvas.selection = false
            lastPosX = opt.e.clientX
            lastPosY = opt.e.clientY

            canvas.setCursor('grabbing')
            document.body.style.cursor = 'grabbing'
        }
    }

    const handleMouseMove = (opt) => {
        if (isPanning && opt.e) {
            const deltaX = opt.e.clientX - lastPosX
            const deltaY = opt.e.clientY - lastPosY

            const moveSpeed = 1
            const vpt = canvas.viewportTransform
            vpt[4] += deltaX * moveSpeed
            vpt[5] += deltaY * moveSpeed

            lastPosX = opt.e.clientX
            lastPosY = opt.e.clientY

            canvas.requestRenderAll()
        }
    }

    const handleMouseUp = () => {
        if (isPanning) {
            isPanning = false
            canvas.selection = true
            canvas.setCursor(isSpacePressed ? 'grab' : 'default')
            document.body.style.cursor = isSpacePressed ? 'grab' : 'default'
        }
    }

    // 添加鼠标进入画布时的样式
    const handleMouseEnter = () => {
        if (isSpacePressed) {
            canvas.setCursor('grab')
        }
    }

    // 添加鼠标离开画布时的样式
    const handleMouseLeave = () => {
        canvas.setCursor('default')
        document.body.style.cursor = 'default'
    }

    // 初始化画布选择设置
    const initializeSelection = () => {
        canvas.selection = true // 启用框选
        canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' // 框选区域的填充颜色
        canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 框选边框的颜色
        canvas.selectionLineWidth = 1 // 框选边框的宽度
    }

    // 在组件挂载时调用
    initializeSelection()

    // 添加事件监听
    document.addEventListener('keydown', handleKeyDown)
    document.addEventListener('keyup', handleKeyUp)

    // 返回清理函数供组件卸载时调用
    const cleanup = () => {
        document.removeEventListener('keydown', handleKeyDown)
        document.removeEventListener('keyup', handleKeyUp)
    }

    return {
        handleWheel,
        handleMouseDown,
        handleMouseMove,
        handleMouseUp,
        handleMouseEnter,
        handleMouseLeave,
        cleanup
    }
}